<template>
  <div class="CeremonyHall h100" v-loading="loading">
    <div class="PageContent">
      <el-form
        :model="ruleForm"
        :inline="true"
        ref="ruleForm"
        label-width="80px"
        class="PageItem margintop20"
      >
        <el-row :gutter="5" class="fileSearch">
          <el-form-item label="结算时间:">
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="ruleForm.chargeStartTime"
              format="yyyy-MM-dd"
            ></el-date-picker
            >
            -
            <el-date-picker
              type="date"
              placeholder="选择时间"
              v-model="ruleForm.chargeEndTime"
              format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
          <!-- notes = "是否业务费用(销售模式)(物品,服务)", name = "asBusiness" -->
          <el-form-item label="销售方式:" prop="asBusiness">
            <el-select v-model="ruleForm.asBusiness" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in asBusinessCode"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- notes = "服务类型", name = "typeCode" -->
          <el-form-item label="类型" prop="typeCode">
            <el-select
              v-model="ruleForm.typeCode"
              onkeydown="return (event.keyCode!=8)"
              placeholder="请选择"
            >
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in dictionary"
                :key="item.typeCode"
                :label="item.typeName"
                :value="item.typeCode"
                :disabled="item.disableState"
              />
            </el-select>
          </el-form-item>

          <!-- notes = "是否业务费用(销售模式)(物品,服务)", name = "feeCode" -->
          <el-form-item label="费用类型:" prop="feeCode">
            <el-select v-model="ruleForm.feeCode" placeholder="请选择">
              <el-option label="全部" value=""></el-option>
              <el-option
                v-for="item in feeCode"
                :key="item.label"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button
              type="primary"
              size="mini"
              v-if="btnRight.btnServiceSaleSearch"
              @click="onSubmit('search')"
            >查询
            </el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置
            </el-button
            >
            <el-button
              type="primary"
              size="mini"
              plain
              v-if="btnRight.btnServiceSaleExport"
              @click="openExecl"
            >导出Excel
            </el-button
            >
          </el-form-item>
        </el-row>
        <el-table
          :data="tableData"
          max-height="560"
          border
          :header-cell-style="{
            background: 'rgb(246,247,251)',
            color: '#606266',
          }"
          stripe

          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column
            prop="itemName"
            align="center"
            label="服务项目名称"
            width="200"
          >
          </el-table-column>
          <el-table-column
            prop="itemNumber"
            align="center"
            label="数量"
            width="120"
          >
          </el-table-column>
          <el-table-column
            prop="discountAndBenefitCharge"
            align="center"
            label="减免"
            width="100"
          >
          </el-table-column>
          <el-table-column
            prop="realityCharge"
            align="center"
            label="实收金额"
            width="100"
          >
          </el-table-column>
        </el-table>
        <p style="text-align: right; margin-top: 20px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pager.currentPage"
            :page-size="pager.pageSize"
            background
            layout="prev, pager, next, jumper"
            :total="pager.total"
          >
          </el-pagination>
        </p>
      </el-form>
    </div>
  </div>
</template>

<script>
import {dataFormatetmd} from "@/utils/index";
import * as Type from "@/api/service";
import download from "@/api/download";

export default {
  name: "ServiceSale",
  data() {
    return {
      loading: false,
      asBusinessCode: [
        {label: "零售", value: 0},
        {label: "服务收入", value: 1},
      ],
      feeCode: [
        {label: "服务", value: 0},
        {label: "物品", value: 1},
      ],
      type: [],
      ruleForm: {
        chargeStartTime: "",
        chargeEndTime: "",
        asBusiness: "",
        feeCode: "",
        typeCode: "",
        pageSize: 0,
        currentPage: 0,
        exportExcelFlag: 0,
      },
      pager: {
        pageSize: 2000,
        total: 1,
        currentPage: 1,
      },
      dictionary: [],
      tableData: [],
      tableHeight: 0,
      //按钮权限
      btnRight: {
        btnServiceSaleSearch: true, //查询
        btnServiceSaleExport: true, //导出excel
      },
    };
  }, //载入按钮
  mounted() {
    this.btnRight = this.$route.meta.buttons;
    //遍历属性赋值将true与false字符串转换成布尔型的值
    for (var key of Object.keys(this.btnRight)) {
      this.btnRight[key] =
        this.btnRight[key] || this.btnRight[key] == "true" ? true : false;
    }
    Type.loadServiceDictionary().then((res) => {
      //加载业务类型字典
      this.dictionary = res.data;
    });
    this.defaultValue();
    this.onSubmit();
    var that = this;
    window.onresize = function () {
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      that.tableHeight = dom - search - 110;
    };
  },
  //注销window.onresize事件
  destroyed() {
    window.onresize = null;
  },
  updated() {
    this.$nextTick(() => {
      var dom = document.getElementsByClassName("PageContent")[0].offsetHeight;
      var search = document.getElementsByClassName("fileSearch")[0]
        .offsetHeight;
      this.tableHeight = dom - search - 110;
    });
  },
  methods: {
    //默认初始值方法
    defaultValue() {
      //默认查询开始结束时间为当天
      this.ruleForm.chargeStartTime = dataFormatetmd(new Date());
      this.ruleForm.chargeEndTime = dataFormatetmd(new Date());
    },

    onSubmit(value) {
      this.loading = true;
      if (value) {
        this.pager.currentPage = 1;
      }
      var postData = {
        chargeStartTime: dataFormatetmd(
          new Date(this.ruleForm.chargeStartTime)
        ),
        chargeEndTime: dataFormatetmd(new Date(this.ruleForm.chargeEndTime)),
        asBusiness: this.ruleForm.asBusiness,
        typeCode: this.ruleForm.typeCode,
        feeCode: this.ruleForm.feeCode,
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        exportExcelFlag: 0, //表示显示 1表示导出execl
        "orderField	": "", //排序字段
        orderType: "", //排序顺序
      };
      //查询接口
      Type["loadServiceSale"](postData)
        .then((response) => {
          const {data} = response;
          if (!data) {
            this.loading = false;
            this.$message("数据读取失败");
            return;
          }
          this.tableData = data.list;
          this.pager = data.pager;
          this.loading = false;
          //   //数据读取成功
        })
        .catch((error) => {
          this.$message(error);
          this.loading = false;
          this.tableData = [];
        });
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.ruleForm.chargeStartTime = "";
      this.ruleForm.chargeEndTime = "";
      this.$refs["ruleForm"].resetFields();
      this.onSubmit();
    },
    // 初始页currentPage、初始每页数据数pagesize和数据data
    handleSizeChange: function (size) {
      this.pager.pagesize = size;
      alert(pagesize); //每页下拉显示数据
    },
    handleCurrentChange: function (currentPage) {
      this.pager.currentPage = currentPage;
      this.onSubmit(); //点击第几页
    },
    openExecl() {
      // window.location.href = "excel地址"
      var postData = {
        chargeStartTime: dataFormatetmd(
          new Date(this.ruleForm.chargeStartTime)
        ),
        chargeEndTime: dataFormatetmd(new Date(this.ruleForm.chargeEndTime)),
        asBusiness: this.ruleForm.asBusiness,
        typeCode: this.ruleForm.typeCode,
        feeCode: this.ruleForm.feeCode,
        pageSize: this.pager.pageSize,
        currentPage: this.pager.currentPage,
        exportExcelFlag: 1, //0表示显示 1表示导出execl
        "orderField	": "", //排序字段
        orderType: "", //排序顺序
      };
      // 查询火化记录的接口
      download.exportExcel(
        Type["ServiceSaleEXPEXC"],
        postData,
        "业务销售统计_" + download.getDateTime() + ".xlsx"
      );
    },

    getSummaries(param) {
      const {columns, data} = param;

      const sums = [];
      let sum = 0;
      let sumss = 0
      let sumsss = 0
      console.log(data, 888)
      data.forEach((item) => {
        sum += Number(item.itemNumber)
        sumss += Number(item.discountAndBenefitCharge)
        sumsss += Number(item.realityCharge)
      });
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "合计";
          return;
        }
        if (index === 1) {
          sum = sum.toFixed(2)
          sums[index] = sum;
          return;
        }
        console.log(sumss, 442)

        if (index === 2) {
          sumss = sumss.toFixed(2)
          sums[index] = sumss;
          return;
        }

        if (index === 3) {
          sumsss = sumsss.toFixed(3)
          sums[index] = sumsss;
        }

      });

      return sums;
    },
  },
};
</script>

<style scoped>
.w150 {
  width: 150px;
}
</style>
